<template>
  <div id="Blog" class="indexDiv m-padded-tb-large">
    <!--顶部图片 和 标题-->
    <div style="margin-top: -30px">
      <!--博客首图-->
      <div class="blog_first_picture">
        <img :src="blog.firstPicture"  alt="" />
      </div>
      <!--标题及标题下的子项-->
      <div style="margin-top: -280px">
        <h2 style="font-family: STSong; font-size: 45px; color: #ffffff;" align="center" >{{ blog.title }}</h2>
        <div class="ui container" align="center" style="margin-top: 20px">
          <div class="ui horizontal link list" align="center">
            <div class="item">
              <div class="ui orange basic label" style="font-size: 13px">{{ blog.flag }}</div>
            </div>
            <div class="item">
              <i class="el-icon-user-solid" style="color: #ffffff;"></i>
              <a href="#/aboutMe" style="color: #ffffff;font-size: 20px">{{ blog.nickname }}</a>
            </div>
            <div class="item">
              <i class="el-icon-date" style="color: #ffffff;"></i>
              <span class="item_below_title">{{ blog.updateTime | dateFormat('YYYY-MM-DD HH:mm') }}</span>
            </div>
            <div class="item">
              <i class="el-icon-s-opportunity" style="color: #ffffff;"></i>
              <a @click="toTypeInfo(blog.typeId)" style="color: #ffffff; font-size: 20px" >{{ blog.typeName }}</a>
            </div>
            <div class="item">
              <i class="el-icon-view" style="color: #ffffff;"></i>
              <span class="item_below_title">{{ blog.views }}</span>
            </div>
            <div class="item" @click="goToComment()" style="cursor:pointer">
              <i class="el-icon-chat-line-round" style="color: #ffffff;"></i>
              <span class="item_below_title">{{ blog.commentCount }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--中间内容-->
    <div id="waypoint" class="m-margin- animated fadeIn" style="margin-top: 100px;">
      <div class="ui container m-opacity box-shadow-max">
        <!--内容-->
        <div class="ui attached padded segment m-border" style="background:rgba(255,255,255,0.8)">
          <!--中间博客内容-->
          <div
            v-html="blog.content"
            id="content"
            class="typo  typo-selection js-toc-content m-padded-lr-responsive m-padded-tb-large" >
          </div>

          <div class="ui horizontal divider">end</div>


          <!--赞赏-->
          <div v-show="blog.appreciation" align="center" style="margin-top: 50px; margin-bottom: 40px">
            <el-popover
              placement="bottom"
              width="300"
              trigger="click">
              <div style=" border: 1px solid #f2711c; padding-top: 10px; padding-bottom: 10px">
                <el-row>
                  <el-col :span="12">
                    <div class="rule-box" align="center">
                      <img class="m-border" src="../../assets/img/wechat.jpg" alt="QQ" width="100px">
                      <div style="color: #f2711c;">支付宝</div>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <div class="rule-box" align="center">
                      <img class="m-border" src="../../assets/img/wechat.jpg" alt="QQ" width="100px">
                      <div style="color: #f2711c;">支付宝</div>
                    </div>
                  </el-col>
                </el-row>
              </div>
              <el-button round slot="reference" style="color: #f2711c; border: 1px solid #f2711c">赞赏</el-button>
            </el-popover>
          </div>
        </div>


        <div id="goto" class="ui attached positive message">
          <!--博客信息-->
          <div v-show="blog.shareStatement" class="ui middle aligned stackable grid">
            <div class="nine wide column">
              <ul class="list">
                <li>作者：<span >风中的人儿啊~</span><a href="/aboutMe" target="_blank">（联系作者）</a></li>
                <li>发表时间：<span>{{ blog.updateTime | dateFormat('YYYY-MM-DD HH:mm') }}</span></li>
                <li>版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）</li>
                <li>转载声明：如果是转载栈主转载的文章，请附上原文链接</li>
                <li>公众号转载：请在文末添加作者公众号二维码（公众号二维码见右边，欢迎关注）</li>
              </ul>
            </div>

            <!--微信公众号-->
            <div class="seven wide column">
              <img src="../../assets/img/wechat.jpg" alt="" class="ui right floated rounded bordered image" style="width: 150px">
            </div>
          </div>
        </div>

        <!--评论-->
        <div v-show="blog.commentabled" class="ui bottom attached segment">

          <!--评论表单-->
          <div id="comment_form" class="m-border" align="center" style="background-color: #f2f2f2; padding-top: 15px; margin-bottom: 30px; border-color: #00aaaa">
            <el-form :inline="true" :model="commentForm" :rules="rules" ref="commentForm">
              <el-form-item>
                <el-input type="hidden" v-model="commentForm.blogId"></el-input>
              </el-form-item>
              <el-form-item>
                <el-input type="hidden" v-model="commentForm.blogId"></el-input>
              </el-form-item>
              <el-form-item prop="content" style="margin-left: -17px">
                <el-input
                  type="textarea"
                  :rows="6"
                  :placeholder="commentPlaceholder"
                  v-model="commentForm.content">
                </el-input>
              </el-form-item>
              <div class="demo-form-inline" style="margin-left: 23px;" align="left">
                <el-form-item prop="nickname">
                  <el-input v-model="commentForm.nickname" placeholder="昵称" prefix-icon="el-icon-user-solid" @keyup.enter.native="submitForm('commentForm')"></el-input>
                </el-form-item>
                <el-form-item prop="email">
                  <el-input v-model="commentForm.email" placeholder="邮箱" prefix-icon="el-icon-message" @keyup.enter.native="submitForm('commentForm')"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary"
                             style="background-color: #67c23a; border-color: #67c23a; color: rgb(255,255,255)"
                             class="el-icon-edit-outline"
                             @click="submitForm('commentForm')">&nbsp;&nbsp;发布</el-button>
                  <el-button type="info" @click="resetForm('commentForm')" style="">重置</el-button>
                </el-form-item>
              </div>
            </el-form>
          </div>

          <!--评论区域列表-->
          <div id="comment-container"  class="ui teal segment">
            <div>
              <div class="ui threaded comments" style="max-width: 100%;">
                <h3 class="ui dividing header">评论</h3>

                <!--评论内容-->
                <div class="comment" v-for="(pCcomment, index) in comments" :key="index">
                  <!--父评论-->
                  <a class="avatar">
                    <img v-if="!pCcomment.parentComment.adminComment" :src="require('../../assets/img/' + pCcomment.parentComment.avatar)">
                    <el-avatar shape="square" v-if="pCcomment.parentComment.adminComment" :src="pCcomment.parentComment.avatar"></el-avatar>
                  </a>
                  <div class="content">
                    <a class="author" >
                        <span>{{ pCcomment.parentComment.nickname }}</span>
                      <div v-show="pCcomment.parentComment.adminComment" class="ui mini basic teal left pointing label m-padded-mini">栈主</div>
                    </a>
                    <div class="metadata">
                      <span class="date">{{ pCcomment.parentComment.createTime | dateFormat('YYYY-MM-DD HH:mm') }}</span>
                    </div>
                    <div class="text">
                      {{ pCcomment.parentComment.content }}
                    </div>
                    <div class="actions">
                      <a class="reply" @click="reply(pCcomment.parentComment.id, pCcomment.parentComment.nickname)">回复</a>
                      <el-popconfirm
                        confirm-button-text='是的'
                        cancel-button-text='不用了'
                        icon="el-icon-info"
                        icon-color="red"
                        title="确定要删除当前评论吗？"
                        @confirm="deleteComment(pCcomment.parentComment.id)"
                      >
                        <a v-show="bloggerOnLine" class="delete" slot="reference">删除</a>
                      </el-popconfirm>
                      <!--<a class="delete" href="#" th:href="@{/comment/{id}/delete(id=${comment.id})}" onclick="return confirm('确定要删除该评论吗？三思啊! 删了可就没了！')" th:if="${session.user}">删除</a>-->
                    </div>
                  </div>

                  <!--子集评论-->
                  <div class="comments" v-for="(chidrenComment, index) in pCcomment.chidrenComments" :key="index">
                    <div class="comment">
                      <a class="avatar">
                        <img v-if="!chidrenComment.adminComment" :src="require('../../assets/img/' + chidrenComment.avatar)">
                        <el-avatar shape="square" v-if="chidrenComment.adminComment" :src="chidrenComment.avatar"></el-avatar>
                      </a>
                      <div class="content">
                        <a class="author" >
                          <span>{{ chidrenComment.nickname }}</span>
                          <div v-show="chidrenComment.adminComment" class="ui mini basic teal left pointing label m-padded-mini">栈主</div>
                          &nbsp;<span class="m-teal" style="color: #00aaaa">@ {{ chidrenComment.replyNickname }}</span>
                        </a>
                        <div class="metadata">
                          <span class="date">{{ chidrenComment.createTime | dateFormat('YYYY-MM-DD HH:mm')  }}</span>
                        </div>
                        <div class="text">
                          {{ chidrenComment.content }}
                        </div>
                        <div class="actions">
                          <a class="reply" @click="reply(pCcomment.parentComment.id, chidrenComment.nickname)">回复</a>
                          <el-popconfirm
                            confirm-button-text='是的'
                            cancel-button-text='不用了'
                            icon="el-icon-info"
                            icon-color="red"
                            title="确定要删除当前评论吗？"
                            @confirm="deleteComment(chidrenComment.id)"
                          >
                            <a v-show="bloggerOnLine" class="delete" slot="reference">删除</a>
                          </el-popconfirm>
<!--                          <a v-show="bloggerOnLine"  href="#" onclick="return confirm('确定要删除该评论吗？三思啊! 删了可就没了！')">删除</a>-->
                          <!--<a class="delete" href="#" th:href="@{/comment/{id}/delete(id=${reply.id})}" onclick="return confirm('确定要删除该评论吗？三思啊! 删了可就没了！')" th:if="${session.user}">删除</a>-->
                        </div>
                      </div>
                    </div>
                  </div>

                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: "Blog",
  data() {
    // 邮箱校验
    var checkEmail = (rule, value, callback) => {
      const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
      if (!value) {
        return callback(new Error('邮箱不能为空'))
      }
      setTimeout(() => {
        if (mailReg.test(value)) {
          callback()
        } else {
          callback(new Error('请输入正确的邮箱格式'))
        }
      }, 100)
    }
    return {
      id: -1,
      blog: {},
      comments: [],
      bloggerOnLine: false,
      commentPlaceholder: '请输入评论信息...',
      // replyNickname: '',
      commentForm: {
        blogId: -1,
        parentCommentId: -1,
        content: null,
        nickname: null,
        replyNickname: null,
        email: ''
      },
      rules: {
        content: [
          { required: true, message: '评论内容不能为空', trigger: 'blur' }
        ],
        nickname: [
          { required: true, message: '姓名不能为空', trigger: 'blur' }
        ],
        email: [
          { validator: checkEmail, trigger: 'blur' }
        ]
      }
    };
  },
  methods:{
    // 根据博客id获取博客
    getBlogById(id){
      this.$http.get("http://localhost:8088/show/blogs/blogInfo/"+id).then(res => {
        if (res.data.code == 0) { // 成功
          this.blog = res.data.data;
          console.log(this.blog);
        }
      });
    },
    // 根据博客id获评论信息
    getCommentsByBlogId(){
      if(this.id != -1){
        this.$http.get("http://localhost:8088/show/comments/byBlogId/"+this.id).then(res => {
          if (res.data.code == 0) { // 成功
            this.comments = res.data.data;
            console.log(this.comments);
          }
        });
      }
    },
    // 跳转至分类页面
    toTypeInfo(id){
      this.$router.push({ // 路由跳转并传参
        name:'types',
        params:{
          id:id //博客id
        },
      });
    },
    // 判断博主是否登录系统
    isBloggerOnLine(){
      this.$http.get("http://localhost:8088/show/bloggerStatus/isOnLine").then(res => {
        if (res.data.code == 0) { // 成功
          this.bloggerOnLine = true;
          console.log(this.bloggerOnLine);
        } else {
          this.bloggerOnLine = false;
        }
      });
    },
    // 重置三个输入框
    reset3Input(){
      this.commentPlaceholder = '请输入评论信息...';
      this.commentForm.content = null;
      this.commentForm.nickname = null;
      this.commentForm.email = null;
      this.commentForm.parentCommentId = -1;
      this.commentForm.replyNickname = null;
    },
    // 提交表单
    submitForm(commentForm) {
      this.commentForm.blogId = this.id;
      this.$refs[commentForm].validate((valid) => {
        if (valid) {
          this.$http.post("http://localhost:8088/show/comments/create", this.commentForm).then(res => {
            console.log(res.data);
            if (res.data.code == 0) { //提交成功
              this.getCommentsByBlogId();// 再次获取博客评论
              this.reset3Input(); // 重置三个输入框
            }
            else { //登录失败
              this.$message({
                message: res.data.message,
                type: 'error',
                offset:220,
                showClose:true
              });
            }
          });
        } else {
          this.$message({
            message:"请将信息填写完整",
            type: 'error',
            offset:220,
            showClose:true
          });
          return false;
        }
      });
    },
    // 表单重置
    resetForm(commentForm) {
      this.$refs[commentForm].resetFields();
    },
    // 回复
    reply(parentCommentId, replyNickname) {
      // alert(parentCommentId + replyName);
      this.commentPlaceholder = "@" + replyNickname;
      this.commentForm.parentCommentId = parentCommentId; // 设置父级评论id
      this.commentForm.replyNickname = replyNickname;
      document.getElementById("goto").scrollIntoView();
    },
    // 删除评论
    deleteComment(commentid){
      this.$http.delete("http://localhost:8088/show/comments/delete/" + commentid).then(res => {
        if (res.data.code == 0) { // 成功
          this.$message({
            message:"删除成功",
            type: 'success',
            offset:220,
            showClose:true
          });
          this.getCommentsByBlogId();// 删除评论之后再获取评论
        }
      });
    },
    // 点击评论icon滚动到评论区
    goToComment(){
      document.getElementById("goto").scrollIntoView();
    }
  },
  created() {
    if (this.$route.query.id != null){ // 获取路由传值(博客id)
      this.id = this.$route.query.id;
      // alert(this.id);
      this.getBlogById(this.id);// 根据博客id获取博客
      this.getCommentsByBlogId(); //根据博客id获取评论
      this.isBloggerOnLine(); // 判断博主是否登录系统
    }
  }
}


</script>

<style scoped>
#blog{

}
.m-about-module-bottom{
  padding-top: 10px;
  padding-bottom: 10px;
  border-top: 1px solid #bbbbbb;
}

.m-about-module{
  width: 95%;
  margin: 0 auto;
}

/* 标题下的子项 */
.item_below_title{
  color: #ffffff;
  font-size: 20px
}

/* 顶部图片——图片等比例占满外层容器 */
.blog_first_picture{
  width: 100%;
  height: 450px;
}
.blog_first_picture img{
  width: 100%;
  height: 100%;
  object-fit:cover;
  z-index: -1;
}

/* 设置文本框大小 */
.el-textarea{
  width: 1050px!important;
}
/*input输入框背景色*/
/*.el-input__inner {*/
/*  background-color: #ffffff!important;*/
/*  border: #333333!important;*/
/*  color: #ffffff;*/
/*}*/
</style>
